<template>
  <div class="container">
    <div class="top">
      <div class="image-wrapper">
        <img src="../assets/healthtopnnews.jpg">
      </div>
   
    </div>
    <van-divider />
    <div class="footer">
      <van-list
        :loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getList()"
      >
        <div style="height: 40vw; margin-top:5vw" v-for="item in healthList" :key="item.id">
          <van-row style="height: 100%;" :gutter="[18,0]" justify="space-around" @click="openNews(item.url)">
            <van-col span="8">
              <van-image width="100%" height="100%" fit="cover" :src="item.picUrl" />
            </van-col>
            <van-col span="16">
              <p>{{item.title}}</p>
              <van-row justify="end" style="text-align: left;">
                <van-col span="32" >{{item.description}}</van-col>
               
              </van-row>
            </van-col>
          </van-row>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script >
import { getHealthList } from "../api/health/newsRequest.js";

export default {
  data() {
    return {
      healthList: [],
      loading: false,
      finished: false,
      page: 1,
      topFiveImages: [], // 新增：用于存储前五张图片的链接
      swipeHeight: '200px' // 新增：设置轮播图的高度
    };
  },
  methods: {
    // 请求获取头条新闻数据
    getList() {
      this.loading = true; // 开始加载数据
      console.log("开始请求数据，当前页码:", this.page);

      getHealthList({
        // key: "97a147379202826dd4ca3efbb9ccb49f",
        key: "53d8c8cad64903d85195926c8745324e",
        num: 10,
        page: this.page // 当前页码
      }).then(res => {
        console.log("接口返回数据:", res);
        if (!res || !res.result || !res.result.newslist) {
          console.error("后端接口返回数据异常:", res);
          this.finished = true;
          this.loading = false;
          return;
        }

        if (res.result.newslist.length) {

          console.log("成功获取数据，新增数据数量:", res.result.newslist.length);
          this.healthList = [...this.healthList, ...res.result.newslist];
          this.topFiveImages = this.healthList.slice(0, 5).map(item => item.picUrl);
          this.page++;
          this.loading = false;
        } else {
          console.log("没有更多数据");
          this.finished = true;
          this.loading = false;
        }
      }).catch(error => {
        console.error("接口请求失败:", error);
        this.finished = true;
        this.loading = false;
      });
    },
    // 上一张图片
    prevSlide() {
      this.$refs.swipeRef.prev();
    },
    // 下一张图片
    nextSlide() {
      this.$refs.swipeRef.next();
    },
    // 在当前窗口打开新闻链接
    openNews(url) {
      if (url) {
        window.open(url, '_self');
      }
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<style scoped>
.top {
  margin-top: 3vw;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #efdcdc;
}

.swipe-container {
  position: relative;
}

.swipe-buttons {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  border:rgba(0, 0, 0, 0.001)
}

.prev-button {
  position: absolute;
  left: 10px;
  color:#fff;
  background-color: rgba(0, 0, 0, 0.001); 
}

.next-button {
  position: absolute;
  right: 10px;
  color:#fff;
  background-color: rgba(0, 0, 0,0.001); 
}

.image-wrapper {
  position: relative;
  height: 100%;
 
}

.title-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* 修改背景颜色和透明度 */
  background-color: rgba(0, 0, 0, 0.3); 
  color: white;
  text-align: left;
  /* 设置高度为父元素高度的 20% */
  height: 30%; 
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.title-overlay p {
  /* 修改字体样式和大小 */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
  font-size: 14px; 
  margin: 0;
}
</style>